<template>
	<view :class="{ fixed: isFixed }">
		<view class="cu-custom" :style="[{ height: CustomBar + bottomBar + 'px' }]">
			<view class="cu-bar fixed text-white" style="align-items: flex-start;" :style="style" :class="[bgImage != 'noImage' ? 'none-bg  bg-img' : '', bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<view class="back"></view>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]"><slot name="content"></slot></view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: 24,
			CustomBar: 60,
			bottomBar: uni.upx2px(28)
		};
	},
	name: 'cu-custom',
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var bgImage = this.bgImage;
			var style = `height:${CustomBar + this.bottomBar}px;padding-top:${StatusBar}px;padding-bottom:${this.bottomBar}px;`;
			// if (this.bgImage) {
			// 	style = `${style}background-image:url(${bgImage});`;
			// }
			return style;
		}
	},
	props: {
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: '/static/headerbg.jpg'
		},
		isFixed: {
			type: [Boolean, String],
			default: false
		}
	},
	created() {
		uni.getSystemInfo({
			success: e => {
				console.log('aha')
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.Custom = custom;
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				
			}
		});
	},
	methods: {
		BackPage() {
			//判断上一页是不是首页做返回点击操作
			const currentPage = getCurrentPages()[getCurrentPages().length - 2];
			if (!currentPage) {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
.fixed {
	position: fixed;
	top: 0;
	z-index: 999;
}
.cu-bar .action:first-child {
	margin-left: 16rpx;
	font-size: 38rpx;
}
.back {
	width: 52rpx;
	height: 100%;
	background: url(../../static/back.png) no-repeat center center;
	background-size: 34rpx auto;
}
.cu-bar.bg-img {
	background-image: url(../../static/headerbg.jpg);
}
// .cu-bar.bg-img2 {
// 	background-image: url(/static/bg3.jpg);
// }
</style>
